<!-- 过滤查找信息 -->
<div nz-row class="header_top">
  <div nz-col nzSpan="8">
    <span>
      资产类型&nbsp;&nbsp;&nbsp;&nbsp;
    </span>
    <nz-select style="width: 200px;" [(ngModel)]="singleValue">
      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
    </nz-select>
  </div>
  <div nz-col nzSpan="8">
    <div class="example-input">
      <span>
        关键字&nbsp;&nbsp;&nbsp;&nbsp;
      </span>
      <input nz-input placeholder="default size" nzSize="default">
    </div>
  </div>
  <div nz-col nzSpan="8">
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio nzValue="通过">通过</label>
      <label nz-radio nzValue="不通过">不通过</label>
    </nz-radio-group>
  </div>
  <div nz-row class="my-btn">
    <button nz-button nzType="primary" class="btn" (click)="getBaselinePage()">确认</button>
    <button nz-button nzType="default" class="btn">重置</button>
  </div>
</div>


<div style="margin-top:30px">
  <nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzTotal]="total"
    [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzCurrentPageDataChange)="currentPageDataChange($event)"
    nzBordered nzSize="middle">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkAll($event)" nzAlign="center"></th>
        <th nzShowSort nzSortKey="name" nzAlign="center">容器</th>
        <th nzAlign="center">服务器</th>
        <th nzAlign="center">应用</th>
        <th nzAlign="center">基线编号</th>
        <th nzAlign="center">证据</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody (nzPageSizeChange)="getBaselinePage(true)" (nzPageIndexChange)="getBaselinePage()">
      <ng-container *ngFor="let data of ajaxTable.data">
        <tr *ngFor="let baselineList of data?.baselineListOverviewVos;let i = index">
          <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()" *ngIf="i===0"
            [attr.rowspan]="data?.baselineListOverviewVos.length" nzAlign="center">
          </td>
          <td *ngIf="i===0" [attr.rowspan]="data?.baselineListOverviewVos.length" nzAlign="center">
            <a href="javascript:;">
              {{ data.containerName }}
            </a>
          </td>
          <td *ngIf="i===0" [attr.rowspan]="data?.baselineListOverviewVos.length" nzAlign="center">
            <a href="javascript:;">
              {{ data.serverName }}
            </a>
          </td>
          <td *ngIf="i===0" [attr.rowspan]="data?.baselineListOverviewVos.length" nzAlign="'center'">
            <span *ngFor="let app of data?.apps">
              <a href="javascript:;">
                {{ app.name }}
                <br>
              </a>
            </span>
          </td>
          <td nzAlign="'center'" class="font-style">
            <strong>
              {{ baselineList.baselineNumber }}
            </strong>
          </td>
          <td nzAlign="'center'">
            <div nz-row>
              <div nz-col *ngFor="let evidence of baselineList?.evidences">
                {{ evidence.evidence }}
                <ng-container *ngIf="evidence.pass; else noPass">
                  <i class="icon-sac-correct"></i>
                </ng-container>
                <ng-template #noPass>
                  <i class="icon-sac-error"></i>
                </ng-template>
              </div>
            </div>
          </td>
          <td nzAlign="'center'" *ngIf="i===0" [attr.rowspan]="data?.baselineListOverviewVos.length">
            <ng-container *ngIf="data.pass; else noPass">
              <span class="safety">安全</span>
            </ng-container>
            <ng-template #noPass>
              <span class="danger">危险</span>
            </ng-template>
          </td>
          <td nzAlign="'center'" *ngIf="i===0" [attr.rowspan]="data?.baselineListOverviewVos.length">
            <a routerLink="/layout/assets-management/baseline/baseline-detail"
              [queryParams]="{serverId: data.serverId,containerId: data.containerId}">
              查看详情
            </a>
          </td>
        </tr>
      </ng-container>

    </tbody>
  </nz-table>
</div>

<div *ngIf="false">
  <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="安全基线"
    (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
    <nz-table #smallTable nzBordered [nzShowPagination]="false" [nzData]="data">
      <tbody>
        <tr *ngFor="let data of smallTable.data">
          <td> {{ data.title }} </td>
          <td> {{ data.content }} </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-modal>
  <div class="gutter-example">
    <div nz-row nzGutter="16">

      <div nz-col class="gutter-row" nzSpan="8">
        <div class="gutter-box" class="charts">
          <nz-table #basicTable [nzData]="datas" [nzShowPagination]=false class="gutter-box-table">
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{data.name}}</td>
                <td>{{data.age}}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </div>
</div>
